<!DOCTYPE html>
<html>

<head>

    <title>血压测量</title>
	<titleType style="display: none">healthTest</titleType>
	<%- include('../../_global/baseLibs') %>
	<%- include('measurement.ejs') %>
    <style type="text/css">
    	.background{
			height: 100%;
		}
		.border {
			border: 1px solid #40BDFF !important;
		}
    </style>
</head>

<body>

<!-- header start -->
<header id="header" class="header-box grey fixed"  >
	<div class="header-content">
		<div class="left-tool">
			<a class="back" href="javascript:void(0)"><i class="iconfont icon-back"></i></a>
		</div>
		<div class="title">血压测量</div>
		<div class="right-tool">
			<a class="tool-a" >提交</a>
		</div>
	</div>
</header>
<!-- header end -->

	<div class="mui-content">
		<div class="background">
			<!-- 头部导航栏 -->
			<div class="topBar">
				<div class="text">
					<a id="id_a" onclick="changeTime()">
						<img alt="" src="/static/images/back.png">
						<span class="title" >测量时间</span>
						<span id="testTime" class="time"></span>
					</a>
				</div>
				<div class="line"></div>
			</div>


			<!-- 标尺块 -->
			<div id="ssy-box" class='box'>
				<span class="title" >收缩压</span>
				<div class='valueplus'>                                                                                                                           
					<div class='minus' ><a ><img id="systolicminus_img" src="/static/images/measurement/selfTest/minus.png"></a></div>
					<div class='value' ><span id='systolic' >0</span><span id='systolic_unit'>mmHg</span></div>
					<div class='plus' ><a ><img id="systolicadd_img" src="/static/images/measurement/selfTest/add.png"></a></div>
				</div>
				<div id='systolicWrapper'></div>
			</div>
			<!-- 标尺块 -->
			<div id="szy-box" class='box'>
				<span class="title" >舒张压</span>
				<div class='valueplus'>
					<div class='minus' ><a><img id="minus_img" src="/static/images/measurement/selfTest/minus.png"></a></div>
					<div class='value' ><span id='diastolic' >0</span><span id='diastolic_unit'>mmHg</span></div>
					<div class='plus' ><a><img id="add_img" src="/static/images/measurement/selfTest/add.png"></a></div>
				</div>
				<div id='diastolicWrapper'></div>
			</div>
			<!-- 标尺块 -->
			<div id="xl-box" class='box'>
				<span class="title" >心率</span>
				<div class='valueplus'>                                                                                                                           
					<div class='minus' ><a><img id="heartRateminus_img" src="/static/images/measurement/selfTest/minus.png"></a></div>
					<div class='value' ><span id='heartRate' >0</span><span id='heartRate_unit'>次/分钟</span></div>
					<div class='plus' ><a><img id='heartRateAdd_img' src="/static/images/measurement/selfTest/add.png"></a></div>
				</div>
				<div id='heartRateWrapper'></div>
			</div>
			
			
			<!-- 时间点 -->
			<div class="TimeBox"> 
				<span class="title" >时间点</span>
				<div class="spanBox">
				</div>
			</div>
			
		</div>
	</div>
<button id="titleBtn"   style="width: 100%;height:40px;color: #3082FF;position: fixed;bottom: 0px;;display: none;">提交</button>

<script type="text/javascript">

    var page_pressureMobile = (function($, page_pressureMobile) {

        /*
		* 提交血压测量数据
		*/
        function submitPre(){
            if(page_pressureMobile.validate()) {
                var data = page_pressureMobile.getData();
                $.QuickRemote.AjaxJson({
                    funcName: uri_service_tzcl_save
                    , params: data
                    , callback: function (result) {
                        $.QuickAlert.alertNormal("保存成功", {
                            callback: function(){
                                var url =$.getUrl.pageUrl("measurement","selfTest_mobile");
                                var data = {refreshUrl:url,pageUrl:url};
                                $.QuickUrlUtils.refreshJSBridge(data);
                                $.pageSwitch.goToUrl("measurement","records_mobile","cllx=" + cllx);

                            }
                        })
                    }
                });
            }
        }

        function getData(){
            /*测量时间*/
            var clsj = $("#testTime").text();
            /*时间点*/
            var sjd = $(".timeSpan[class*='border']").data("data")["value"];
            /*收缩压*/
            var ssy = $("#systolic").text();
            /*舒张压*/
            var szy = $("#diastolic").text();
            /*心率*/
            var xl = $("#heartRate").text();
            return {
                cllx: cllx
                ,clsj: clsj
                ,sjd: sjd
                ,ssy: ssy
                ,szy: szy
                ,xl: xl
            };
        }

        function validate(){
            var div = $(".timeSpan[class*='border']");
            if(div['length'] == 0){
                $.QuickAlert.alertFail({
                    content: '请选择时间点'
                });
                return false;
            }
            return true;
        }

        //时间段点击事件
        function sjdClickHandler(){
            $(this).addClass("border").siblings().removeClass("border").find('p').css('color', '#8f8f94');
            $(this).find('p').css('color', '#40BDFF');
        }

        /*创建时间段item*/
        function createSjdItem(){
            var ary = $.JkcsZydmUtils.getAry({
                tableName: 'tzcl_sjd'
            });
            /*只需要 早餐前 睡前*/
            ary = $.grep(ary, function(item){
                var value = item['value'];
                if(value == '2' || value == '7'){
                    return true;
                }
                return false;
            });
            $.each(ary, function(index, item){
                var sjd_item = $($("#sjd_item").html());
                sjd_item.data("data", item);
                sjd_item.find("p").text(item['text']);
                $(".spanBox").append(sjd_item);
            })
        }

        var cfg_def = {
            submitPre: submitPre,
            getData: getData,
            validate: validate,
            sjdClickHandler: sjdClickHandler,
            createSjdItem: createSjdItem,
        }

        //初始化尺子  收缩压
        var systolicRuler =new MeasureRuler({
            wrapperId:"systolicWrapper",
            max:250,
            minUnit:1,// 每个刻度代表的值
            unitSet:10, // 每组刻度个数
            startValue : 60,
            mult:1, //10px
            value:120,
            greenLeft : 90,
            greenRight : 140,
            callback:rulerSetSystolic
        });
        //回调函数 改变数值和颜色
        function rulerSetSystolic(val){
            $("#systolic").html(parseInt(val));
            if(val >= 90 && val <= 140 ){
                $('#systolic').css("color","#40BDFF");
                $('#systolic_unit').css("color","#40BDFF");
            }else{
                $('#systolic').css("color","#FDB178");
                $('#systolic_unit').css("color","#FDB178");
            }
        }

        //初始化尺子  舒张压
        var measureRuler =new MeasureRuler({
            wrapperId:"diastolicWrapper",
            max:180,
            minUnit:1,// 每个刻度代表的值
            unitSet:10, // 每组刻度个数
            startValue : 30,
            mult:1, //10px
            value:80,
            greenLeft : 60,
            greenRight : 90,
            callback:rulerSetValue
        });
        //回调函数 改变数值和颜色
        function rulerSetValue(val){
            $("#diastolic").html(parseInt(val));
            if(val >= 60 && val <= 90 ){
                $('#diastolic').css("color","#40BDFF");
                $('#diastolic_unit').css("color","#40BDFF");
            }else{
                $('#diastolic').css("color","#FDB178");
                $('#diastolic_unit').css("color","#FDB178");
            }

        }

        //初始化  心率
        var heartRateWrapper=new MeasureRuler({
            wrapperId:"heartRateWrapper",
            max:200,
            minUnit:1,// 每个刻度代表的值
            unitSet:10, // 每组刻度个数
            startValue : 0,
            mult:1, //10px
            value:70,
            greenLeft : 60,
            greenRight : 100,
            callback:rulerSetHeartRate
        });
        //回调函数 改变数值和颜色
        function rulerSetHeartRate(val){
            $("#heartRate").html(parseInt(val));
            if(val >= 60 && val <= 100 ){
                $('#heartRate').css("color","#40BDFF");
                $('#heartRate_unit').css("color","#40BDFF");
            }else{
                $('#heartRate').css("color","#FDB178");
                $('#heartRate_unit').css("color","#FDB178");
            }
        }

        mui.init({
            swipeBack:false //启用右滑关闭功能
        });

        /*血压类型*/
        var cllx = '02';

        page_pressureMobile.init = function(cfg){
            $.extend(page_pressureMobile, cfg_def, cfg);


            initRule("ssy-box", systolicRuler, 1);
            initRule("szy-box", measureRuler, 1);
            initRule("xl-box", heartRateWrapper, 1);

            //时间段点击
            $(".spanBox").on ("click", '.timeSpan', page_pressureMobile.sjdClickHandler);
            page_pressureMobile.createSjdItem();

            var date = new Date();
            $('#testTime').text(date.Format('yyyy-MM-dd HH:mm:ss'));
            $(".tool-a").on ("click", page_pressureMobile.submitPre);
//            if( u.indexOf('micromessenger') != -1){
//                $("#titleBtn").show();
//            }
            $("#titleBtn").on ("click", page_pressureMobile.submitPre);

        }

        return page_pressureMobile;
    })(jQuery, {});
	



</script>

</body>
<script type="text/html" id="sjd_item">
	<div class="timeSpan">
		<p></p>
	</div>
</script>
</html>